import React, { Component } from "react"

import { Link, IndexLink } from 'react-router'
import { Row, Col, Popover, Menu, Icon } from 'antd'

import './index.scss'
import wordmark  from '../../img/wordmark.png';
import { local } from '../../util/storage'
import fetchData from '../../util/fetch'
const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;
const MenuItem = Menu.Item;

class Header extends Component {
    constructor(props) {
        super(props)
        this.state = {
            isPlaceName: '维斯特洛',
            isShow: false,
            isShowPlace: false,
        }
    }

    //WEB-ENDEMIC-ID
    onClickPlace = (info) => {
        local.set('WEB-ENDEMIC-ID', info.webEndemicId);
        local.set('WEB-ENDEMIC-PLACE', info.endemicName)
        location.reload()
    }

    show = () => {
        this.setState({
            isShow: true,
            isShowPlace: false
        })
    }
    hide = () => {
        this.setState({
            isShow: false
        })
    }
    showPlace = () => {
        this.setState({
            isShow: false,
            isShowPlace: true
        })
    }
    hidePlace = () => {
        this.setState({
            //isShow: false,
            isShowPlace: false
        })
    }

    getPlace(url, opts) {
        fetchData(url, opts, function (res) {
            let data = eval(res.data);
            local.set('WEB-ENDEMIC-ID', data.endemicId);
            local.set('WEB-ENDEMIC-PLACE', data.endemicName);
            this.setState({
                isPlaceName: data.endemicName
            })
        }.bind(this));
    }


    componentDidMount() {

    }

    render() {


        const items = [ { title: '人物', content: [ { name: 'POV人物', names: [{name: '克礼森', names: []},{name: '瓦拉米尔', names: []},{name: '齐特', names: []},{name: '威尔', names: []},{name: '艾莉亚·史塔克', names: []},{name: '凯特琳·徒利', names: []}, {name: '席恩·葛雷乔伊', names: []}, {name: '更多...', names: []}]},
            {name: '君王', names: [{name: '疯王伊里斯', names: []},{name: '劳勃·拜拉席恩', names: []},{name: '史坦尼斯·拜拉席恩', names: []},{name: '蓝礼·拜拉席恩', names: []},{name: '罗柏·史塔克', names: []},{name: '乔佛里·拜拉席恩', names: []},{name: '巴隆·葛雷乔伊', names: []},{name: '托曼·拜拉席恩', names: []},{name: '攸伦·葛雷乔伊', names: []},{name: '更多...', names: []},]},
            {name: '贵族', names: [{name: '道朗·马泰尔', names: []},{name: '泰温·兰尼斯特', names: []},{name: '莱莎·徒利', names: []},{name: '培提尔·贝里席', names: []},{name: '玛格丽·提利尔', names: []},{name: '阿莎·葛雷乔伊', names: []},{name: '卢斯·波顿', names: []},{name: '蓝道·塔利', names: []},{name: '瓦德·佛雷', names: []},{name: '更多贵族男性...', names: []},{name: '更多贵族女性...', names: []},]},
            {name: '骑士', names: [{name: '贝里·唐德利恩', names: []},{name: '亚瑟·戴恩', names: []},{name: '乔拉·莫尔蒙', names: []},{name: '雷加·坦格利安', names: []},{name: '格雷果·克里冈', names: []},{name: '琼恩·克林顿', names: []},{name: '戴佛斯·席渥斯', names: []},{name: '波隆', names: []},{name: '布林登·徒利', names: []},{name: '更多...', names: []},]},
            {name: '平民', names: [{name: '老奶妈', names: []},{name: '阿多', names: []},{name: '雪伊', names: []},{name: '詹德利', names: []},{name: '密尔的索罗斯', names: []},{name: '泰莎', names: []},{name: '补丁脸', names: []},{name: '罗尔杰', names: []},{name: '尖牙', names: []},{name: '更多...', names: []},]},
            {name: '按地域分类', names: [{name: '北境人物', names: []},{name: '西境人物', names: []},{name: '谷地人物', names: []},{name: '河湾地人物', names: []},{name: '王领人物', names: []},{name: '风暴地人物', names: []},{name: '河间地人物', names: []},{name: '多恩人物', names: []},{name: '铁群岛人物', names: []},{name: '塞外人物', names: []},{name: '更多...', names: []},]},
            {name: '按组织分类', names: [{name: '守夜人', names: []},{name: '无旗兄弟会', names: []},{name: '教会成员', names: []},{name: '雇佣兵', names: []},{name: '御林铁卫', names: []},{name: '学士', names: []},{name: '更多...', names: []},]}
        ]}, { title: '世界', content: []},
            { title: '原著与游戏', content: []},
            { title: '电视剧', content:[]}]


        const views = items.map((item, inx)=> {
            const items = item.content.map((record, index)=>{
                const subItems = record.names.map((sec, inx) => {
                    return <MenuItem key={ index *100+inx}>{sec.name}</MenuItem>
                });
                return <SubMenu key={index} title={record.name}>
                    { subItems }
                </SubMenu>
            })

            const content = (
                <Menu mode="vertical">
                    { items }
                </Menu>
            );
            return <Popover key={inx} placement="bottom" content={content}>
                <li className="wds-tabs__tab" >
                    <div className="wds-dropdown">
                        <div className="wds-tabs__tab-label wds-dropdown__toggle">
                            <a href="/wiki/Portal:%E4%BA%BA%E7%89%A9" data-tracking="custom-level-1">
                                <span>{item.title}</span>
                            </a>
                            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" className="wds-icon wds-icon-tiny wds-dropdown__toggle-chevron" id="wds-icons-dropdown-tiny"><path d="M6 9l4-5H2" fill-rule="evenodd"></path></svg>						</div>
                    </div>
                </li>
            </Popover>
        })

        return (
			<header className="wds-community-header">
				<div >
					<div className="community-header-icon">
						<IndexLink to="/">
							<img src={ wordmark } alt=""/>
						</IndexLink>
					</div>
                    <div className="header-top-container">
                        <div className="header-sitename" data-tracking="sitename">
                            <a href="http://zh.asoiaf.wikia.com/wiki/%E5%86%B0%E4%B8%8E%E7%81%AB%E4%B9%8B%E6%AD%8C%E4%B8%AD%E6%96%87%E7%BB%B4%E5%9F%BA">冰与火之歌 个人维基</a>
                        </div>
                    </div>
                    <nav className="wds-community-header__local-navigation">
                        <ul className="wds-tabs">
                            { views }
                        </ul>
                    </nav>
				</div>
			</header>
        )
    }
}
export default Header;
